<script setup>
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'
import { getBusinessStatisticsService } from '@/api/report'

const props = defineProps({
  dateRange: {
    type: Object,
    required: true
  }
})

const chart = ref(null) // 获取DOM引用
let myChart = null // 持久化图表实例
const dateList = ref() // 日期列表
const businessCountList = ref() // 每日业务数列表
const validBusinessCountList = ref() // 每日有效业务数列表
const totalStatistics = ref({
  totalValidBusinessCount: null, // 业务总数
  totalBusinessCount: null, // 有效业务总数
  businessCompletionRate: null // 业务完成率
})

const getBusinessStatistics = async () => {
  const res = await getBusinessStatisticsService(props.dateRange)
  dateList.value = res.data.data.dateList
  businessCountList.value = res.data.data.businessCountList
  validBusinessCountList.value = res.data.data.validBusinessCountList
  totalStatistics.value = {
    totalValidBusinessCount: res.data.data.totalValidBusinessCount,
    totalBusinessCount: res.data.data.totalBusinessCount,
    businessCompletionRate: res.data.data.businessCompletionRate
  }
  updateChart()
}

// 初始化图表基础配置
const initChart = () => {
  myChart = echarts.init(chart.value)
  const baseOption = {
    tooltip: {
      trigger: 'axis',
      formatter: (params) => {
        let result = params[0].axisValue + '<br/>'
        params.forEach((item) => {
          result += `${item.marker}${item.seriesName}：<b>${item.value}</b><br/>`
        })
        return result
      }
    },
    legend: {
      data: ['业务数', '有效业务数']
    },
    grid: {
      left: '1%',
      right: '1%',
      bottom: '3%',
      top: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false
    },
    yAxis: {
      type: 'value',
      minInterval: 1 // 最小间隔为1
    },
    series: [
      {
        name: '业务数',
        type: 'line',
        smooth: true
      },
      {
        name: '有效业务数',
        type: 'line',
        smooth: true
      }
    ]
  }
  myChart.setOption(baseOption)
}

// 更新图表数据
const updateChart = () => {
  const option = {
    xAxis: {
      data: dateList.value
    },
    series: [
      {
        data: businessCountList.value
      },
      {
        data: validBusinessCountList.value
      }
    ]
  }
  myChart.setOption(option)
}

onMounted(() => {
  initChart()
})

watch(() => props.dateRange, getBusinessStatistics, { immediate: true })
</script>

<template>
  <div class="stats-container">
    <div class="stats-item">
      <div class="stats-label">业务完成率</div>
      <div class="stats-value">
        {{ (totalStatistics.businessCompletionRate * 100).toFixed(2) + '%' }}
      </div>
    </div>
    <span>=</span>
    <div class="stats-item">
      <div class="stats-label">有效业务</div>
      <div class="stats-value">{{ totalStatistics.totalValidBusinessCount }}</div>
    </div>
    <span>/</span>
    <div class="stats-item">
      <div class="stats-label">业务总数</div>
      <div class="stats-value">{{ totalStatistics.totalBusinessCount }}</div>
    </div>
  </div>
  <div ref="chart" style="width: 100%; height: 310px"></div>
</template>

<style lang="scss" scoped>
.stats-container {
  height: 40px;
  display: flex;
  justify-content: flex-end;
  align-items: center;

  .stats-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 10px;

    .stats-label {
      font-size: 14px;
      color: #909399;
    }

    .stats-value {
      font-size: 16px;
      font-weight: 700;
      color: #444;
    }
  }
}
</style>
